<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>

<%@ include file="/_taglib.jsp" %>

<%@ include file="/_navbar.jsp" %>

<style type="text/css">
.grid_wrapper{
    width: 230px;
    height: 230px;
    margin-left: auto;
    margin-right: auto;
}
.grid{
    margin-left: 5px;
    margin-top: 5px;
}
.grid:after{
    content: ".";
    display: block;
    line-height: 0;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
}
.grid a,.grid a:visited{
    float: left;
    display: inline;
    border: 5px solid #ccc;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 50px;
    margin-left: -5px;
    margin-top: -5px;
    position: relative;
    z-index: 1;
}
.grid a:hover{
    border-color: #f00;
    z-index: 2;
}

</style>

<section class="content" style="padding: 0px 10px">
		<div class="row">
			<div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>
							车牌号码
                        </h3>
                        <p>
                            ${tboxDevice.vPlate}
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-model-s"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>
							车主姓名
                        </h3>
                        <p>
                            ${tboxDevice.vUser}
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>
							车主电话
                        </h3>
                        <p>
                            ${tboxDevice.vEcall}
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-help-buoy"></i>
                    </div>
                    <a href="#" class="small-box-footer" data-toggle="modal" data-target="#compose-modal">
                        <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>
                           	呼叫救援
                        </h3>
                        <p>
                            95190
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-medkit"></i>
                    </div>
                    <a href="#" class="small-box-footer" data-toggle="modal" data-target="#compose-modal">
                        <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
        </div>
		<div class="row">
		<div class="col-lg-3 col-xs-12">
		<div class="box">
            <div class="box-header">
                <h3 class="box-title">告警方位</h3>
            </div><!-- /.box-header -->	
		    <div class="box-body no-padding">
            	
				<div class="grid_wrapper">
				    <div class="grid">
				        <a href="#" ${style8} id="i8">8</a>
				        <a href="#" ${style1} id="i1">1</a>
				        <a href="#" ${style2} id="i2">2</a>
				        <a href="#" ${style7} id="i7">7</a>
				        <a href="#" id="iche"><img src="img/che21.jpg" height=60" width="60" /></a>
				        <a href="#" ${style3} id="i3">3</a>
				        <a href="#" ${style6} id="i6">6</a>
				        <a href="#" ${style5} id="i5">5</a>
				        <a href="#" ${style4} id="i4">4</a>
				    </div>
				</div>		

		    </div><!-- /.box-body -->
		</div>			 
		</div>
		<div class="col-lg-3 col-xs-12">
			<!-- 
			<img src="http://api.map.baidu.com/staticimage?center=${lng},${lat}&width=535&height=300&zoom=17&markers=116.403874,39.914888" />
			 -->
		<div class="box">

		    <div class="box-body no-padding">
            	
			<div id="allmap" style="height:290px"></div>
	

		    </div><!-- /.box-body -->
		</div>			 
		</div>

		<div class="col-lg-6 col-xs-12">			
			<div class="box box-primary">
                 <!-- form start -->
                 <form role="form" action="tbox/tboxMsgLog/disposeSave" method="post" onsubmit="return ajaxFormSubmit(this,'tbox/tboxMsgLog/list2dispose')">
                 	 <input type="hidden" name="tboxMsgLog.id" value="${tboxMsgLog.id}">
                 	 <input type="hidden" name="tboxMsgLog.disposeStatus" value="101001">
                     <div class="box-body">
                         <div class="form-group">
                             <label for="exampleInputEmail1">发生时间</label>
                             <input type="text" value="${tboxMsgLog.eventTime}" class="form-control" id="exampleInputEmail1" disabled>
                         </div>
                         <div class="form-group">
							<label>事件内容</label>
							<textarea class="form-control" rows="3" disabled>${eventDesc}</textarea>
						</div>
						<div  class="form-group">
                         <div class="checkbox" style="display:inline-block;margin-top:0px">
                             <label >
                                 <input type="checkbox" style="margin-left:5px" name="tboxMsgLog.isCallUser" value="100101" 
                                 <c:if test="${!empty tboxMsgLog.isCallUser}">checked</c:if>
                                 > 已联系车主
                             </label>
                         </div>
                         <div class="checkbox" style="display:inline-block;margin-top:0px">
                             <label >
                                 <input type="checkbox" style="margin-left:5px" name="tboxMsgLog.isECall" value="100101" 
                                 <c:if test="${!empty tboxMsgLog.isECall}">checked</c:if>
                                 > 已联系紧急联系电话
                             </label>
                         </div>
                         <div class="checkbox" style="display:inline-block;margin-top:0px">
                             <label >
                                 <input type="checkbox" style="margin-left:5px" name="tboxMsgLog.isRescue" value="100101"
                                 <c:if test="${!empty tboxMsgLog.isRescue}">checked</c:if>
                                 > 已呼叫救援
                             </label>
                         </div>
                         </div>
                         <div class="form-group">
							<label>其他处理记录</label>
							<textarea class="form-control" rows="3" name="tboxMsgLog.disposeContent">${tboxMsgLog.disposeContent}</textarea>
						 </div>                         
                     </div><!-- /.box-body -->

                     <div class="box-footer" align="center">
                         <button type="submit" class="btn btn-primary">保存</button>
                     </div>
                 </form>
		</div>				
		</div>
		</div>
		

		<!-- 
		<div class="box">
		
		
            <div class="box-header">
                <h3 class="box-title">数据明细</h3>
            </div>
		    <div class="box-body no-padding">
		        <table class="table table-condensed">
		            <tbody><tr>
		                <th style="width: 100px">名称</th>
		                <th>数据参数</th>
		            </tr>
		            <tr>
		                <td>业务ID</td>
		                <td>${tboxMsgLog.aid}</td>
		            </tr>
		            <tr>
		                <td>消息ID</td>
		                <td>${tboxMsgLog.mid}</td>
		            </tr>
		            <tr>
		                <td>事件ID</td>
		                <td>${tboxMsgLog.eventId}</td>
		            </tr>
		            <tr>
		                <td>设备标识号SN</td>
		                <td>${tboxMsgLog.sn}</td>
		            </tr>
		            <tr>
		                <td>IMSI号码</td>
		                <td>${tboxMsgLog.imsi}</td>
		            </tr>
		            <tr>
		                <td>车辆VIN码</td>
		                <td>${tboxMsgLog.vin}</td>
		            </tr>
		            <tr>
		                <td>事件时间</td>
		                <td>${tboxMsgLog.eventTime}</td>
		            </tr>
		            <tr>
		                <td>业务内容</td>
		                <td>${tboxMsgLog.appData}</td>
		            </tr>
		        </tbody></table>
		    </div>
		     -->
		</div>

</section>

        <!-- COMPOSE MESSAGE MODAL -->
        <div class="modal fade" id="compose-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><i class="fa fa-envelope-o"></i> TBOX 事件处理 </h4>
                    </div>
						<div class="box box-info">
                            <div class="box-header">
                                <i class="fa fa-bullhorn"></i>
                                <h3 class="box-title">电话接通中……</h3>
                            </div><!-- /.box-header -->
                            <div class="box-body">
                                <div class="callout callout-danger">
                                    <h4>电话接通中，通话会录音，请客服人员按要求做好通话记录。</h4>
                                </div>
                            </div><!-- /.box-body -->
                        </div>
                        <div class="modal-footer clearfix"  align="center">
                            <button class="btn btn-primary" data-dismiss="modal">知道了</button>
                        </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

<%  
//    String path = request.getContextPath();  
//    String basePath = request.getScheme() + "://"  
//            + request.getServerName() + ":" + request.getServerPort()  
//            + path + "/";  
%> 

<%@ include file="/_edit_js.jsp" %>

<SCRIPT type="text/javascript">
	$(function (){
		console.debug(1);
		var script = document.createElement("script");
		console.debug(script);
		script.type = "text/javascript";
		script.src = "http://api.map.baidu.com/api?v=2.0&ak=8E77505ea774632622a29ed0119d6cee&callback=init";
		document.body.appendChild(script);
	});
	
	function init() {
		console.debug(2);
		var map = new BMap.Map("allmap");            // 创建Map实例
		var point = new BMap.Point(${lng}, ${lat}); // 创建点坐标
		map.centerAndZoom(point,15);                 
		map.enableScrollWheelZoom();                 //启用滚轮放大缩小
		var marker = new BMap.Marker(point);        // 创建标注 
		map.addOverlay(marker);                     // 将标注添加到地图中
	}  
</SCRIPT>

